-
Notifications
You must be signed in to change notification settings - Fork 30
New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
Handle crossword articles #12925
base: main
Are you sure you want to change the base?
Handle crossword articles #12925
Conversation
Size Change: +11.6 kB (+1.24%) Total Size: 953 kB
ℹ️ View Unchanged
|
0789e74
to
8a244f7
Compare
2e7e45f
to
3fe07f7
Compare
this is a first pass, it needs work
and use JSdoc for editor assistance
bf139e7
to
8c33976
Compare
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Looks good! A few questions/suggestions.
import { Crossword as ReactCrossword } from '@guardian/react-crossword-next'; | ||
import type { CrosswordProps } from '@guardian/react-crossword-next'; | ||
|
||
export const Crossword = (data: CrosswordProps['data']) => ( |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Are you considering data
to be the "props" to this component? So that each property in the data object is a separate prop that can be passed individually?
@@ -50,6 +50,7 @@ | |||
"@guardian/libs": "19.2.1", | |||
"@guardian/ophan-tracker-js": "2.2.5", | |||
"@guardian/react-crossword": "2.0.2", | |||
"@guardian/react-crossword-next": "npm:@guardian/[email protected]", |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Is the plan to merge this PR with the preview version of the dependency in use?
} | ||
|
||
const element: CrosswordElement = { | ||
_type: 'model.dotcomrendering.pageElements.CrosswordElement' as const, |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
What does the as const
do here?
let article = enhanceArticleType(frontendData, 'Web'); | ||
|
||
if (article.frontendData.crossword) { | ||
article = enhanceCrosswordArticle(article); |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Is there a way we can run this as part of the other enhancers, i.e. within the enhanceArticleType
function?
I think the net effect of this function is to append a new block to the article? Therefore it could perhaps live in the enhanceBlocks
function? That's the place where modifications to the blocks are typically handled.
dotcom-rendering/dotcom-rendering/src/model/enhanceBlocks.ts
Lines 98 to 115 in 411e928
export const enhanceBlocks = ( | |
blocks: Block[], | |
format: ArticleFormat, | |
options: Options, | |
): Block[] => { | |
const additionalElement: FEElement[] = []; | |
if (options.audioArticleImage) { | |
additionalElement.push(options.audioArticleImage); | |
} | |
return blocks.map((block) => ({ | |
...block, | |
elements: enhanceElements( | |
format, | |
block.id, | |
options, | |
)([...block.elements, ...additionalElement]), | |
})); | |
}; |
Alternatively, it could be concatenated onto the result of that function within the enhanceArticleType
function, whenever a crossword is present.
dotcom-rendering/dotcom-rendering/src/types/article.ts
Lines 43 to 49 in 411e928
const enhancedBlocks = enhanceBlocks(data.blocks, format, { | |
renderingTarget, | |
promotedNewsletter: data.promotedNewsletter, | |
imagesForLightbox, | |
hasAffiliateLinksDisclaimer: !!data.affiliateLinksDisclaimer, | |
audioArticleImage: data.audioArticleImage, | |
}); |
|
||
return { | ||
...article, | ||
format: { ...article.format }, |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
This is perhaps not needed now that we're not longer modifying format
?
format: { ...article.format }, |
based heavily on the work done by @andrew-nowak in #12511, this is first pass of getting crosswords working in DCR.
it does not include layout changes, because there's work to be done in CAPI client and frontend to support that.
those will come in #13001.